<!-- 「签到成功」弹窗 -->
<template>
  <uni-popup
    ref="popup"
    type="center"
  >
    <div class="container">
      <image
        class="title"
        src="https://ustatic.hudongmiao.com/joymew-host-contest/202310-activity/check-in-success.svg"
      />
      <image
        class="icon"
        src="https://ustatic.hudongmiao.com/joymew-host-contest/202310-activity/confirm-green.svg"
      />
      <div class="text">
        已赠送<span class="red">50</span>积分至团队邀请赛<br>8人全员签到额外赠送<span class="red">400</span>积分哦～
      </div>
      <div
        class="confirm"
        @click="close"
      >
        我知道了
      </div>
      <div
        class="cancel"
        @click="close"
      >
        取消
      </div>
    </div>
  </uni-popup>
</template>

<script setup lang="ts">
import type { } from '@uni-helper/uni-app-types';

const currentInstance = getCurrentInstance();

const emit = defineEmits<{(event: 'close'): void;}>();

/** 打开弹窗 */
const open = () => {
  const popup = currentInstance?.refs.popup as UniHelper.UniPopup;
  popup?.open();
};

/** 关闭弹窗 */
const close = () => {
  const popup = currentInstance?.refs.popup as UniHelper.UniPopup;
  popup?.close();
  emit('close');
};

defineExpose({
  open,
  close,
});

</script>

<style scoped lang="scss">
.container{
  width: 80vw;

  background: #fff;
  border-radius: 16px;

  padding: 24px 0;
  display: grid;
  grid-template:
    'title' min-content
    '.' 29px
    'icon' min-content
    '.' 24px
    'text' min-content
    '.' 24px
    'confirm' min-content
    '.' 16px
    'cancel' min-content
    / 1fr;
  align-items: center;
  justify-items: center;
  .red {
    color: #FF403C;
  }
  .title{
    grid-area: title;

    width: 112px;
    height: 20px;
  }

  .icon{
    grid-area: icon;

    width: 115px;
    height: 115px;
  }

  .text{
    grid-area: text;

    font-size: 15px;
    color: #333;
    text-align: center;
  }

  .confirm{
    grid-area: confirm;

    width: 240px;
    height: 36px;

    background: $button-bg;
    border-radius: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 15px;
    color: #fff;
  }

  .cancel{
    grid-area: cancel;

    font-size: 15px;
    color: #8d8d8d;
  }

}
</style>
